<template>
  <lay-container fluid="true" class="role-box">
    <lay-card>
      <lay-form style="margin-top: 10px" :model="searchQuery" ref="queryRef">
        <lay-row>
          <lay-col :md="5">
            <lay-form-item label="角色代码" label-width="80" prop="roleCode">
              <lay-input v-model="searchQuery.roleCode" placeholder="请输入" :allow-clear="true" style="width: 98%" />
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="角色名" label-width="80" prop="roleName">
              <lay-input v-model="searchQuery.roleName" placeholder="请输入" :allow-clear="true" style="width: 98%" />
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="状态" label-width="80" prop="status">
              <lay-select class="search-input" v-model="searchQuery.status" :allow-clear="true" placeholder="请选择">
                <lay-select-option value="on" label="启用"></lay-select-option>
                <lay-select-option value="off" label="禁用"></lay-select-option>
              </lay-select>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label-width="20">
              <lay-button style="margin-left: 20px" type="primary" @click="rolePage()"> 查询 </lay-button>
              <lay-button @click="toReset(queryRef,rolePage)"> 重置 </lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    </lay-card>
    <!-- table -->
    <div class="table-box">
      <lay-table
        :page="fxwPage.page"
        :height="'100%'"
        :columns="columns"
        :loading="fxwPage.loading.value"
        :default-toolbar="true"
        :data-source="fxwPage.dataSource.value"
        v-model:selected-keys="fxwPage.selectedKeys.value"
        @change="rolePage">

        <template v-slot:toolbar>
          <lay-button v-perm="'role_add'"  size="sm" type="primary" @click="toAddRoleDom">
            <lay-icon class="layui-icon-addition"></lay-icon>
            新增
          </lay-button>
        </template>

        <!-- 列插槽-start -->
        <template v-slot:status="{ row }">
          <lay-switch v-model="row.status.code"
                      onswitch-value="on" unswitch-value="off"
                      onswitch-text="启用"  unswitch-text="禁用"
                      @change="status =>changeStatus(row,status)">
          </lay-switch>
        </template>

        <template v-slot:_index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <!-- 列插槽-end -->

        <template v-slot:operator="{ row }">
          <lay-dropdown size="sm" updateAtScroll>
            <lay-button type="primary">操作</lay-button>
            <template #content>
              <lay-dropdown-menu>
                <lay-dropdown-menu-item v-perm="'role_edit'" @click="toEditRoleDom(row.id)">编辑</lay-dropdown-menu-item>
                <lay-dropdown-menu-item v-perm="'role_permission'" @click="toPermissionDom(row.id)">授权</lay-dropdown-menu-item>
                <lay-dropdown-menu-item v-perm="'role_userList'" @click="toUserPageDom(row.id)">用户</lay-dropdown-menu-item>
                <lay-dropdown-menu-item v-perm="'role_remove'" @click="toRemoveRoleDom(row.id)">删除</lay-dropdown-menu-item>
              </lay-dropdown-menu>
            </template>
          </lay-dropdown>
        </template>

      </lay-table>
    </div>

    <!-- 外部组件 -->
    <add ref="addRef" title="新增角色" @refreshParent="rolePage"></add>
    <edit ref="editRef" title="编辑角色" :id="params_id" @refreshParent="rolePage"></edit>
    <userPage ref="userPageRef" title="用户列表" :role-id="params_roleId"></userPage>
    <permission ref="permissionRef" title="授权" :role-id="params_roleId"></permission>

  </lay-container>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {selectRolePage, removeRole, statusRole} from '@/api/module/role'
import add from './add.vue'
import edit from './edit.vue'
import userPage from './userPage.vue'
import useFxwPage from '@/hooks/useFxwPage'
import useFxwForm from "@/hooks/useFxwForm";
import permission from './permission.vue'
import {layer} from "@layui/layui-vue";
import {removeUser} from "@/api/module/user";

const {toReset} = useFxwForm()

const queryRef = ref();
const fxwPage = useFxwPage();
const searchQuery = ref({
  roleCode: '',
  roleName: '',
  status: '',
  pageNumber: 1,
  pageSize: 10,
})

const columns = ref([
  {title: '序号', width: '80px', key: '_index', customSlot: '_index'},
  // { title: '编号', width: '80px', key: 'id', fixed: 'left' },
  { title: '角色名', width: '140px', key: 'roleName',},
  { title: '角色代码', width: '140px', key: 'roleCode' },
  { title: "状态", width:"100px", key:"status",customSlot: 'status' },
  { title: '描述', key: 'note' },
  { title: '创建时间', width: '150px', key: 'createTime' },
  { title: '创建人', width: '140px', key: 'createBy' },
  { title: '操作', width: '100px', customSlot: 'operator', key: 'operator', fixed: 'right' }
])

// 初始化数据
onMounted(()=>{
  rolePage();
})


const rolePage = function (cp:any = fxwPage.page){
  searchQuery.value.pageNumber = cp.current;
  searchQuery.value.pageSize = cp.limit;
  fxwPage.loading.value = true;
  selectRolePage(searchQuery.value).then(res=>{
    fxwPage.dataSource.value = res.data.records;

    fxwPage.loading.value = false;
    fxwPage.page.total = res.data.totalRow;
  })
}


// 新增角色
const addRef = ref();
const toAddRoleDom = () => {
  addRef.value.changeVisible();
}
// 编辑角色
const editRef = ref();
const params_id = ref<number>()
const toEditRoleDom = (id:number) => {
  params_id.value = id;
  editRef.value.changeVisible();
}

// 删除角色
function toRemoveRoleDom(id:number) {
  layer.confirm("确认删除该角色？",{
    btn: [
      {
        text:'确认',
        callback: (index:string) => {
          removeRole(id).then(res => {
            if (res.code == 200) {
              layer.close(index);
              rolePage();
            }
          })
        }
      },
      {text:'取消', callback: (index:string) => {
          layer.close(index); }
      }
    ]
  })
}

// 查看角色相关用户
const params_roleId = ref(0);
const userPageRef = ref();
const toUserPageDom = (roleId:number) => {
  params_roleId.value = roleId;
  userPageRef.value.changeVisible();
}

// 切换状态
const statusRoleBo = ref({
  id:0,
  status: ''
});
const changeStatus = function (row:any,status:string) {
  statusRoleBo.value.id = row.id;
  statusRoleBo.value.status = status;

  const statusBak = row.status.code;
  statusRole(statusRoleBo.value).then(res => {
    if (res.code == 200) {
      rolePage();
    }else {
      row.status.code = statusBak;
    }
  })
};

// 授权
const permissionRef = ref();
const toPermissionDom = (roleId:number)=>{
  params_roleId.value = roleId;
  permissionRef.value.changeVisible();
}

</script>

<style scoped>
.role-box {
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 700px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>